[Разбор] Новогодняя страница сервера полный разбор проекта

📌 Что это за проект

Перед нами не просто праздничная веб-страница, а полноценная демонстрация работы сервера, которая одновременно:

Проект демонстрирует связку: Frontend (HTML / CSS / JS / Canvas) + Backend-логика на уровне Nginx.

🧱 Архитектура проекта

Проект намеренно минималистичен и состоит всего из двух файлов:

index.html → интерфейс и анимации
mysite.txt → конфигурация сервера Nginx

Общая схема работы

Пользователь
↓
HTTPS (Nginx)
↓
sub_filter / маршруты
↓
index.html
↓
Canvas + JavaScript

🧩 Файл index.html — лицо проекта

Это единственный файл, который загружается браузером.

Базовая HTML-структура

```html
<!DOCTYPE html>
<html lang="ru">
<head>...</head>
<body>...</body>
</html>

Страница содержит:

🎨 Визуальный стиль (CSS)

🌌 Фон

background: radial-gradient(circle at top,#0b2a55,#000814 70%);

📱 Адаптивность

@media (max-width: 480px) { ... }

При маленьком экране:

💡 Важно:
Адаптация выполнена чисто через CSS, без JS-костылей.

⏱ Таймер до Нового года

HTML

<b id="d"></b> дней
<b id="h"></b> часов
<b id="m"></b> минут
<b id="s"></b> секунд

JavaScript-логика

function nextNewYear() {
  const now = new Date();
  let y = now.getFullYear();
  if (now >= new Date(y,0,1)) y++;
  return new Date(y,0,1);
}

Почему это грамотное решение

❄️ Снег

Снег реализован через DOM + CSS-анимации.

for (let i = 0; i < 170; i++) {
  const s = document.createElement('span');
}

📌 Визуально создаёт «живую открытку».

💡 Гирлянды (Canvas)

Используется HTML5 Canvas.

Два режима работы

if (isVertical) {
  drawVerticalGarland(t);
} else {
  drawHorizontalGarland(t);
}

Что реализовано

📌 Один алгоритм — две геометрии.

🎄 Ёлка (Canvas)

Ёлка не картинка, а полностью рисуется кодом.

Состав ёлки

canvas.addEventListener('click', () => clickWave = 1);

💡 При клике по ёлке запускается волна усиленного свечения, которая постепенно затухает.

🎆 Фейерверки

Запускаются при наступлении Нового года.

Используются как праздничное событие, а не постоянная анимация.

🎆 Фейерверки

Запускаются при наступлении Нового года.

Используются как праздничное событие, а не постоянная анимация.

🎨 Логика анимаций: как это работает изнутри

Этот проект построен не на «готовых эффектах», а на простых математических принципах, которые в сумме дают живую анимацию. Ниже — разбор ключевых частей.

🎄 Принцип построения ёлки (Canvas)

Ёлка не рисуется линиями или треугольниками.
Она собирается из множества маленьких веток, размещённых по определённому правилу.

1. Вертикальная структура

for (let y = 60; y < 440; y += 6) {
  ...
}

Это формирует силуэт ёлки.

2. Расширение к низу (ширина кроны)

const w = ((y - 60) / 380) * 180;

📌 Смысл формулы:

Это простая линейная интерполяция, но визуально даёт правильную форму.

3. Случайность = живость

x: 220 + (Math.random() - 0.5) * w

📌 Именно случайность убирает «компьютерность».

4. Почему прямоугольники, а не линии?

ctx.fillRect(x, y, 2, 8);

Много простых форм лучше, чем мало сложных.

💡 Огни на ёлке: фазовая анимация

Каждый огонёк — это точка со своей фазой.

const glow = (Math.sin(t * 0.003 + phase) + 1) / 2;

📌 Что здесь происходит:

В итоге:

Клик по ёлке — волна света

clickWave += 1;
clickWave *= 0.92;

📌 Это state-based animation, а не одноразовый эффект.

🌟 Звезда на макушке

ctx.shadowBlur = 30;
ctx.shadowColor = 'gold';

Звезда — это:

Принцип: свет важнее формы.

💡 Гирлянды: синус вместо физики

Гирлянды не «висят», а математически колеблются.

y = baseY + Math.sin(x * 0.01) * amplitude;

📌 Глаз верит синусу больше, чем физике.

❄️ Снег: почему не Canvas

Снег реализован через DOM + CSS, потому что:

Это осознанный выбор, а не упрощение.

🎆 Фейерверки: частицы + гравитация

Каждая частица:

vy += 0.05; // псевдо-гравитация
alpha -= 0.015;

Никакой физики — только визуальное правдоподобие.

🧠 Общий принцип анимаций проекта

Во всём проекте используется один подход:

Много простых элементов + плавная математика + небольшая случайность

Это:

📌 Почему это хороший пример для обучения

Этот проект отлично показывает:

🌐 Файл mysite.txt — серверная логика (Nginx)

Это ключевая особенность проекта, которая выводит его за рамки обычного фронтенда.

🔐 HTTPS и HTTP/2

listen 443 ssl http2;
ssl_certificate /etc/letsencrypt/...

🔁 Редирект HTTP → HTTPS

return 301 https://$host$request_uri;

Пользователь никогда не остаётся на небезопасной версии.

🧠 Подстановка IP без JavaScript

sub_filter

sub_filter
 'И готов к демонстрации ✨'
 'Ваш IP: $remote_addr';

🔹 HTML-файл не меняется
🔹 JavaScript не нужен
🔹 IP подставляется на лету сервером

Это редкий и очень показательный приём.

📡 Маршрут /myip

location /myip {
  return 200 "$remote_addr";
}

Позволяет получить IP напрямую:

https://site/myip

Полезно для:

⚙️ Производительность

gzip on;
gzip_types text/css application/javascript;
Критерий Оценка
Frontend ✅
Canvas ✅
Адаптивность ✅
Чистота кода ✅
HTTPS ✅
Nginx-логика ✅
IP без JS ✅
Демонстрационная ценность ✅
## 🧩 Итог

Это показательный, умный и компактный проект, который:

← Назад